<template>
    <div class="p_20">
        <div class="useravative flexcenter">
           <img src="@/assets/images/avatar.png" alt="">
        </div>
        <el-form :model="rowinfo" ref="reForm" label-width="120px" label-position="left" class="mb_40">
            <el-form-item label="支付结果：" prop="pay">
                    <!-- <el-select v-model="rowinfo.pay" disabled placeholder="支付结果" style="width:100%">
                        <el-option label="支付成功" :value="1"></el-option>
                        <el-option label="支付失败" :value="2"></el-option>
                    </el-select> -->
                <span>{{rowinfo.status_name}}</span>
            </el-form-item>
            <el-form-item label="姓名：">
                <span>{{rowinfo.userinfo?rowinfo.userinfo.name:'-'}}</span>
            </el-form-item>
            <el-form-item label="支付金额：">
                <span>{{rowinfo.coin}}</span>
            </el-form-item>
            <el-form-item label="支付方式:" >
                <span>{{rowinfo.userinfo?rowinfo.userinfo.pay_type_name:'-'}}</span>
            </el-form-item>
            <el-form-item label="账号：" v-if="rowinfo.userinfo.pay_type==1">
                <span>{{rowinfo.userinfo?rowinfo.userinfo.account:'-'}}</span>
            </el-form-item>
            <el-form-item label="二维码：" v-else>
                <img :src="rowinfo.userinfo.url" class='img' />
            </el-form-item>
            
            <el-form-item label="联系方式：">
                <span>{{rowinfo.userinfo?rowinfo.userinfo.phone:'-'}}</span>
            </el-form-item>
            
            <el-form-item v-if="rowinfo.pay_type&&rowinfo.pay_type==1" label="支付订单号：" prop="order">
                <el-input v-model="rowinfo.order" readonly placeholder="请输入支付订单号" />
            </el-form-item>
            <el-form-item v-if="rowinfo.status==1" label="流水号：" prop="">
                <el-input v-model="rowinfo.pay_order" readonly  placeholder="支付说明" />
            </el-form-item>
            <el-form-item v-if="rowinfo.status==4" label="原因：" prop="msg">
                <el-input v-model="rowinfo.msg" readonly type="textarea" rows="5" placeholder="支付说明" />
            </el-form-item>
        </el-form>
        <!-- <div class="flexcolumn">
            <div class="columnitem">
                <span class="itemtitle">用户名：</span>
                <span class="itemval overflowtext">{{rowinfo.info?rowinfo.info.name:'-'}}</span>
            </div>
            <div class="columnitem">
                <span class="itemtitle">支付金额：</span>
                <span class="itemval">{{rowinfo.coin}}</span>
            </div>
            <div class="columnitem">
                <span class="itemtitle">支付号码：</span>
                <span class="itemval">{{rowinfo.info?rowinfo.info.account||'-':'-'}}</span>
            </div>
            <div class="columnitem">
                <span class="itemtitle">订单号：</span>
                <span class="itemval">{{rowinfo.order||'-'}}</span>
            </div>
            <div class="columnitem" v-if="rowinfo.status==1">
                <span class="itemtitle">流水号：</span>
                <span class="itemval">{{rowinfo.pay_order||'-'}}</span>
            </div>
            <div class="columnitem" v-if="rowinfo.status==4">
                <span class="itemtitle">原因：</span>
                <span class="itemval">{{rowinfo.msg||'-'}}</span>
            </div>
        </div> -->
        <div class="dialog-userfooter mt_20" style="justify-content:center">
            <el-button type="primary" @click="handleCancle">返 回</el-button>
        </div>
    </div>
</template>
<script>
import { getpayDetail } from '@/api/message';
export default {
    data(){
        return {
            
        }
    },

    props:{
        rowinfo:{
            type:Object,
            default:null
        }
    },

    created(){
        console.log('rowinfo:',this.rowinfo);
        // this.getDetail()
    },

    methods:{

        // getDetail(){
        //     getpayDetail({id:this.rowid}).then(res=>{
        //         if(res.code == 1){

        //         }
        //     })
        // },
        
        handleCancle(){
            this.$emit('close')
        },
    }
}
</script>
<style lang="scss" scoped>
.columnitem{
    display: flex;
    width: 100%;
    margin-bottom: 25px;
    .itemtitle{
        display: inline-block;
        width: 20%;
        text-align: left;
        font-size: 14px;
        font-weight: 700;
        // color: #606266;
    }
    .itemval{
        display: inline-block;
        width: 55%;
        font-weight: 700;
        // color: #000;
        font-size: 14px;
    }
}
::v-deep .img{
    width: 60px;
    height: 60px;
}
.useravative{
    width: 100%;
    margin: 40px;
    img{
        width: 60px;
        height: 60px;
    }
}
.img{
    width: 100px;
    height: 100px;
}
</style>